<template>
	<view class="container">
		<!-- 标题 -->
		<view class="navbar"></view>
		<!-- 内容 -->
		<view class="content-warpper">
			<!-- 状态 -->
			<view class="status">
				<view class="complete">
					<image :src="status===3?'/orderPages/static/complete.png':'/orderPages/static/clock.png'"
						mode="widthFix"></image>
					<text>{{order_detail.status_text}}</text><text v-if="status==0"
						class="price">&nbsp;￥{{order_detail.order_amount}}</text>
				</view>
				<text class="tip">{{tip}}</text>
			</view>
			<!-- 商品信息 -->
			<view class="goods flex-between" @click="goDetail">
				<image src="/static/index_slices/goods2.png" mode="widthFix"></image>
				<view class="goods-detail">
					<h4>{{order_detail.goods_name}}</h4>
					<view class="num">
						<text class="num">{{order_detail.goods_sku}}</text>
					</view>
					<view class="flex-between">
						<view class="price-box">
							<text>￥</text>
							<text class="price">{{order_detail.goods_price}}</text>
						</view>
						<text>X{{order_detail.order_num}}</text>
					</view>
				</view>
			</view>
			<!-- 信息 -->
			<view class="info-address">
				<view class="info">
					<text class="name">{{order_detail.delivery_name}}</text>
					<text>{{order_detail.delivery_phone}}</text>
				</view>
				<text class="address">{{order_detail.delivery_addr}}</text>
			</view>
			<!-- 订单信息 -->
			<view class="order">
				<view class="order-list">
					<text>发货方式:</text>
					<text>{{parseInt(order_detail.receive_type) ? '物流发货':'上门自提'}} </text>
				</view>
				<view class="order-list">
					<text>订单编号:</text>
					<text @click="oncopy(order_detail.order_no)">{{order_detail.order_no}} | 复制 </text>
				</view>
				<view class="order-list">
					<text>下单时间:</text>
					<text>{{order_detail.createtime}} </text>
				</view>
				<view class="order-list" v-if="parseInt(order_detail.pay_type)">
					<text>支付时间:</text>
					<text>{{order_detail.paytime}}</text>
				</view>
			</view>
			<!-- 总额 -->
			<view class="total-amount">
				<view class="flex-between item">
					<text>商品总额</text>
					<view class="">
						<text>￥</text>
						<text class="total">{{order_detail.order_amount}}</text>
					</view>
				</view>
				<view class="item">
					<text class="meet">应付 </text>
					<text class="symbol"> ¥</text>
					<text class="amout">{{order_detail.order_amount}}</text>
				</view>
			</view>
			<!-- 按钮 -->

		</view>
		<view class="foot" v-if="status < 3">
			<button v-if="status==0 || status == 1 " @click="onOperate('取消订单')">取消订单</button>
			<button v-if="status==0" class="pay" @click="goPay">去支付</button>
			<button v-if="status==1" @click="onOperate('申请退款')">申请退款</button>
			<button v-if="status==2" @click="onOperate('确认收货')">确认收货</button>
			<!-- <button v-if="status==2" @click="onOperate('确认收货')">确认收货</button> -->
			<!-- <button v-if="status==3" @click="deleteOrder">删除订单</button> -->
			<!-- <button v-if="status==1">待发货</button> -->
		</view>
		<ConfirmDialog :show="show" :title="confirmInfo.title" :content="confirmInfo.content"
			:confirmText="confirmInfo.confirmText" :cancelText="confirmInfo.cancelText" @cancel="onCancel"
			@close="onClose" @confirm="onCofirm">
		</ConfirmDialog>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import CustomNavbar from '@/components/CustomNavbar.vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import ConfirmDialog from '../../../components/ConfirmDialog.vue';
	const status = ref(0)
	const id = ref('')
	const order_detail = ref({})
	const toBack = () => {
		uni.navigateBack()
	}
	const setTip = (status) => {
		if (status == 0) return '请您及时付款，订单将会自动取消';
		if (status == 1) return '我们将尽快安排发货，请耐心等待…';
		if (status == 2) return '您的货已经安排发出，请耐心等待…';
	}
	// 提示信息
	const tip = ref('您的订单已完成，期待您的下次光临')
	onLoad((options) => {
		id.value = options.id
		getDetail()
	})
	const getDetail = () => {
		uni.$api.order.orderDetail({
			id: id.value
		}).then(res => {
			if (res.code == 200) {
				order_detail.value = res.data
				status.value = Number(res.data.status)
				tip.value = setTip(status.value)
				uni.setNavigationBarTitle({
					title: res.data.status_text
				});
			}
		})
	}
	//复制订单
	const oncopy = (no) => {
		uni.setClipboardData({
			data: no,
			success: () => {
				uni.showToast({
					title: '已复制'
				});
			}
		});
	}
	// 弹框
	const show = ref(false)
	const confirmInfo = reactive({
		title: '',
		content: '',
		confirmText: '',
		cancelText: ''
	})
	const onOperate = (type) => {
		show.value = true
		if (type == '取消订单') Object.assign(confirmInfo, {
			title: '取消订单',
			content: '确定是否取消该订单呢，取消订单之后将不可恢复哦',
			confirmText: '确认取消',
			cancelText: '我再想想',
			type: 'cancel'
		})
		if (type == '申请退款') Object.assign(confirmInfo, {
			title: '申请退款',
			content: '此订单确定需要退款吗？退款金额将在1-3个工作日内到您的账户',
			confirmText: '确认退款 ',
			cancelText: '我再想想',
			type: 'quit'
		})
		if (type == '确认收货') Object.assign(confirmInfo, {
			title: '确认收货',
			content: '请您在确认收货之前确定是否已收到货哦~确认之后方可确认收货',
			confirmText: '确认收货 ',
			cancelText: '我再想想',
			type: 'receipt'
		})
	}
	const onCancel = () => {
		show.value = false
	}
	const onClose = () => {
		show.value = false
	}
	const onCofirm = () => {
		let url = 'cancelOrder';
		console.log(confirmInfo.type)
		if (confirmInfo.type == 'quit') {
			url = 'serviceOrder'
		} else if (confirmInfo.type == 'receipt') {
			url = 'receiveOrder'
		}
		uni.$api.order[url]({
			id: id.value
		}).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				show.value = false
				setTimeout(function() {
					uni.navigateBack()
				}, 1000)
			}
		})

	}
	// 去支付
	const goPay = () => {
		uni.navigateTo({
			url: '/orderPages/pages/order/pay-order?total=' + order_detail.value.order_amount + '&order_id=' +
				id.value
		})
	}
	// 删除订单
	const deleteOrder = () => {

	}
	//去商品详情
	const goDetail = () => {
		uni.navigateTo({
			url: '/goodsPages/pages/goods/goods?id=' + order_detail.value.goods_id
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		background: url('/static/index_slices/index_bg.png') no-repeat;
		background-size: 100% auto;
		// padding-top: 28rpx; /* 导航栏高度 */
		padding-bottom: 112rpx;
	}

	// 标题
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 30rpx;
		color: #fff;
		z-index: 999;
		text-align: center;

		image {
			position: absolute;
			left: 30rpx;
			top: 30rpx;
			width: 20rpx;
			height: 38rpx;
		}

	}

	// 状态
	.content-warpper {
		padding-top: 21rpx;

		// 状态
		.status {
			text-align: center;
			color: #fff;

			.complete {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-weight: bold;

				image {
					width: 40rpx;
					margin-top: 6rpx;
					margin-right: 17rpx;
				}

				.price {
					font-size: 32rpx;
					color: #fff;
				}
			}

			.tip {
				font-size: 26rpx;
				margin-top: 9rpx;
			}
		}

		// 商品信息
		.goods {
			background-color: #fff;
			border-radius: 16rpx;
			margin: 30rpx 20rpx 20rpx;
			padding: 30rpx;
			font-size: 11rpx;
			color: #999;

			image {
				width: 160rpx;
				border-radius: 10rpx;
				margin-right: 24rpx;
			}

			.goods-detail {

				h4 {
					width: 468rpx;
					font-size: 26rpx;
					color: #000000;
					font-weight: normal;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.num {
					padding-top: 28rpx;
					margin-bottom: 45rpx;
				}

				.price-box {
					font-size: 24rpx;
					color: #DD3A22;
					font-weight: bold;
				}

				.price {
					font-size: 32rpx
				}
			}
		}

		// 信息-地址
		.info-address {
			margin: 20rpx;
			padding: 40rpx 23rpx;
			background-color: #fff;
			border-radius: 26rpx;

			.info {
				font-size: 30rpx;
				color: #002222;
				font-weight: bold;

				.name {
					color: #101624;
					padding-right: 70rpx;
				}
			}

			.address {
				font-size: 26rpx;
				color: #3D4354;
				margin-top: 30rpx;
			}
		}

		.order {
			background-color: #fff;
			border-radius: 16rpx;
			margin: 20rpx;
			padding: 0 20rpx 0 30rpx;

			.order-list {
				padding: 40rpx 0 52rpx 0;

				&:nth-child(2) {
					border-top: 1px solid #EEF3F6;
					border-bottom: 1px solid #EEF3F6;
				}
			}
		}

		.total-amount {
			background-color: #fff;
			border-radius: 16rpx;
			margin: 20rpx;
			padding: 0 20rpx 0 30rpx;
			text-align: right;
			font-size: 26rpx;
			color: #101624;

			.flex-between {
				border-bottom: 1px solid #EEF3F6;
			}

			.item {
				padding: 40rpx 0 52rpx 0;

			}

			.total {
				color: #222222;
				font-weight: bold;
				font-size: 28rpx;
			}

			.meet {
				color: #42485A;
			}

			.symbol {
				color: #FF3A3A;
			}

			.amout {
				color: #FF3A3A;
				font-size: 30rpx
			}
		}

	}

	// 按钮
	.foot {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
		background-color: #fff;
		height: 98rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		button {
			padding: 0;
			margin: 0;
			width: 168rpx;
			height: 62.5rpx;
			line-height: 62.5rpx;
			font-size: 28rpx;
			color: #5E646C;
			border: 1rpx solid #D2D5DB;
			border-radius: 31.25rpx;
			background-color: #fff;
			margin-right: 25rpx;

			&.pay {
				border-color: #FF3A3A;
				color: #FF3A3A;
			}

			&::after {
				border: none;
			}
		}
	}
</style>